import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  BookOpen, 
  CheckCircle, 
  Clock, 
  Target,
  TrendingUp,
  Plus,
  Edit3,
  Calendar
} from "lucide-react";

interface ProgressTrackerProps {
  onClose: () => void;
}

interface Course {
  id: string;
  name: string;
  subject: string;
  status: "not-started" | "in-progress" | "completed";
  progress: number;
  totalLessons: number;
  completedLessons: number;
  dueDate?: string;
}

export const ProgressTracker = ({ onClose }: ProgressTrackerProps) => {
  const [courses, setCourses] = useState<Course[]>([
    {
      id: "1",
      name: "Algebra II",
      subject: "Mathematics",
      status: "in-progress",
      progress: 65,
      totalLessons: 20,
      completedLessons: 13,
      dueDate: "2024-07-15"
    },
    {
      id: "2",
      name: "World History",
      subject: "History",
      status: "in-progress",
      progress: 40,
      totalLessons: 15,
      completedLessons: 6,
      dueDate: "2024-07-20"
    },
    {
      id: "3",
      name: "Creative Writing",
      subject: "English",
      status: "not-started",
      progress: 0,
      totalLessons: 12,
      completedLessons: 0,
      dueDate: "2024-08-01"
    },
    {
      id: "4",
      name: "Chemistry Basics",
      subject: "Science",
      status: "completed",
      progress: 100,
      totalLessons: 18,
      completedLessons: 18
    }
  ]);

  const updateCourseStatus = (courseId: string, newStatus: Course['status']) => {
    setCourses(prev => prev.map(course => 
      course.id === courseId 
        ? { 
            ...course, 
            status: newStatus,
            progress: newStatus === "completed" ? 100 : newStatus === "not-started" ? 0 : course.progress
          }
        : course
    ));
  };

  const getStatusColor = (status: Course['status']) => {
    switch (status) {
      case "completed": return "bg-green-100 text-green-800";
      case "in-progress": return "bg-blue-100 text-blue-800";
      case "not-started": return "bg-gray-100 text-gray-800";
    }
  };

  const getStatusIcon = (status: Course['status']) => {
    switch (status) {
      case "completed": return CheckCircle;
      case "in-progress": return Clock;
      case "not-started": return Target;
    }
  };

  const inProgressCourses = courses.filter(c => c.status === "in-progress");
  const completedCourses = courses.filter(c => c.status === "completed");
  const notStartedCourses = courses.filter(c => c.status === "not-started");

  const overallProgress = Math.round(
    courses.reduce((acc, course) => acc + course.progress, 0) / courses.length
  );

  const renderCourseCard = (course: Course) => {
    const StatusIcon = getStatusIcon(course.status);
    return (
      <Card key={course.id} className="hover:shadow-md transition-shadow">
        <CardHeader>
          <div className="flex items-start justify-between">
            <div>
              <CardTitle className="text-lg mb-2">{course.name}</CardTitle>
              <Badge variant="outline" className="text-xs mb-2">
                {course.subject}
              </Badge>
            </div>
            <Badge className={`${getStatusColor(course.status)} flex items-center gap-1`}>
              <StatusIcon className="w-3 h-3" />
              {course.status.replace("-", " ")}
            </Badge>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between text-sm mb-2">
                <span>Progress</span>
                <span>{course.progress}%</span>
              </div>
              <Progress value={course.progress} className="h-2" />
            </div>
            
            <div className="flex justify-between text-sm text-gray-600">
              <span>Lessons: {course.completedLessons}/{course.totalLessons}</span>
              {course.dueDate && (
                <span className="flex items-center gap-1">
                  <Calendar className="w-3 h-3" />
                  Due: {course.dueDate}
                </span>
              )}
            </div>

            <div className="flex gap-2">
              <select 
                value={course.status}
                onChange={(e) => updateCourseStatus(course.id, e.target.value as Course['status'])}
                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
              >
                <option value="not-started">Not Started</option>
                <option value="in-progress">In Progress</option>
                <option value="completed">Completed</option>
              </select>
              <Button variant="outline" size="sm">
                <Edit3 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="mb-8">
          <Button 
            variant="ghost" 
            onClick={onClose}
            className="mb-4 hover:bg-gray-100"
          >
            ← Back to Home
          </Button>
          
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              Learning Progress Tracker
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Take control of your learning journey. Track your courses, set goals, and celebrate your achievements.
            </p>
          </div>
        </div>

        {/* Overview Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6 text-center">
              <div className="text-3xl font-bold text-blue-600 mb-2">{courses.length}</div>
              <div className="text-gray-600">Total Courses</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <div className="text-3xl font-bold text-green-600 mb-2">{completedCourses.length}</div>
              <div className="text-gray-600">Completed</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <div className="text-3xl font-bold text-yellow-600 mb-2">{inProgressCourses.length}</div>
              <div className="text-gray-600">In Progress</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <div className="text-3xl font-bold text-purple-600 mb-2">{overallProgress}%</div>
              <div className="text-gray-600">Overall Progress</div>
            </CardContent>
          </Card>
        </div>

        {/* Course Tabs */}
        <Tabs defaultValue="all" className="w-full">
          <div className="flex justify-between items-center mb-6">
            <TabsList>
              <TabsTrigger value="all">All Courses</TabsTrigger>
              <TabsTrigger value="in-progress">In Progress</TabsTrigger>
              <TabsTrigger value="completed">Completed</TabsTrigger>
              <TabsTrigger value="not-started">Not Started</TabsTrigger>
            </TabsList>
            <Button className="gap-2">
              <Plus className="w-4 h-4" />
              Add Course
            </Button>
          </div>

          <TabsContent value="all">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {courses.map(renderCourseCard)}
            </div>
          </TabsContent>

          <TabsContent value="in-progress">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {inProgressCourses.map(renderCourseCard)}
            </div>
          </TabsContent>

          <TabsContent value="completed">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {completedCourses.map(renderCourseCard)}
            </div>
          </TabsContent>

          <TabsContent value="not-started">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {notStartedCourses.map(renderCourseCard)}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};
